<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			.centainer {

				width: 1000px;
				height: 500px;
				border: solid red 1px;
				margin-left: 100px;
				display: flex;
			
				/* 样式定义 */
				/* flex-direction: row; */
				/*横向排列 从左往右  */
				/* flex-direction: row-reverse;*/
				/* 横向排列 从右往左 */
				/* flex-direction: column; */
				/* 纵向排列 从上往下 */
				/* flex-direction: column-reverse; */
				/* 纵向排列 从下往上 */
				/* flex-wrap: wrap; */
				/* 控制换行 */
				/* flex-flow: row-reverse nowrap; */
				 /* justify-content: flex-end; */
				 /* 右对齐 */
				/* justify-content: center; */
				/* 水平居中 */
				justify-content: space-around;
				/* div之间间距 */
			}

			.items {

				width: 100px;
				height: 50px;
				border: solid blue 1px;
				box-sizing: border-box;
					/* 把边框border包含在width里 */
			}
		</style>
	</head>
	<body>
		<div class="centainer">
			<div class="items">1fgfgfg</div>
			<div class="items">2fgfgfgf</div>
			<div class="items">3fgfgff</div>
			<div class="items">4fgfgfgf</div>
			<div class="items">5fgfgff</div>
			
		</div>
	</body>
</html>
